{% extends "../torcms_maplet/map_full_overlay.html" %}
{% block head %}
<title>{{ _('Map') }},{{ _('Synchronise view') }}</title>
<meta name="description" content="{{ _('Map') }},{{ _('Synchronise view') }}">
<meta name="keywords" content="{{ _('Map') }},{{ _('Synchronise view') }}">
<script type="text/javascript" src="{{ static_url('maplet/L.Map.Sync.js') }}"></script>

<SCRIPT>
    var vlon = {{kwd['lon']}};
    var vlat = {{kwd['lat']}};
    var vzoom_current = {{kwd['zoom_current']}};
    var vzoom_max = {{kwd['zoom_max']}};
    var vzoom_min = {{kwd['zoom_min']}};

</script>

<style type="text/css">
    html, body {
        width: 100%;
        height: 100%;
        margin: 0;
    }
    #map1, #map2 {
        width: 49.9%;
        height: 100%;
    }
    #map1 {
        float: left;
    }
    #map2 {
        float: right;
    }
</style>

{% end %}

{% block mainbody %}
<input id="app_ctrl" value="{{ app_str }}" style="display: none;">


<div id="map1"></div>
<div id="map2"></div>


<script type="text/javascript">

    var marker1;
    var marker2;

    popup = L.popup();

    $.ready()
    {
        var app_arr, app_url, baseMaps, ii, jj, lyrs, map, mycars, osm, overlayMaps;

        app_url = $("#app_ctrl").val();
        app_arr = app_url.split("/");


        var osm_a1 = L.tileLayer.chinaProvider('TianDiTu.Normal.Annotion', {
            maxZoom: 18,
            minZoom: 1
        });

        var osm_a2 = L.tileLayer.chinaProvider('TianDiTu.Normal.Map', {
            maxZoom: 18,
            minZoom: 1
        });



                var osm_b1 = L.tileLayer.chinaProvider('TianDiTu.Normal.Annotion', {
            maxZoom: 18,
            minZoom: 1
        });

        var osm_b2 = L.tileLayer.chinaProvider('TianDiTu.Normal.Map', {
            maxZoom: 18,
            minZoom: 1
        });


        var osm = L.layerGroup([osm_a2, osm_a1]);
        var osm2 = L.layerGroup([osm_b2, osm_b1]);


        // osm = L.tileLayer.chinaProvider('Google.Normal.Map', {
        //     maxZoom: 18,
        //     minZoom: 1
        // });
        //
        //
        // osm2 = L.tileLayer.chinaProvider('Google.Normal.Map', {
        //     maxZoom: 18,
        //     minZoom: 1
        // });


        m1 = L.tileLayer.wms("https://tile.osgeo.cn/service?", {
            layers: "mp" + app_arr[0].substring(1),
            format: "image/png",
            transparent: !0,
            attribution: "Maplet"
        });

        m2 = L.tileLayer.wms("https://tile.osgeo.cn/service?", {
            layers: "mp" + app_arr[1].substring(1),
            format: "image/png",
            transparent: !0,
            attribution: "Maplet"
        });


        var center = [vlat, vlon];

        var map1 = L.map('map1', {
            layers: [osm, m1],
            center: center,
            zoom: vzoom_current,
            maxZoom: vzoom_max,
            minZoom: vzoom_min
        });

        map1.attributionControl.setPrefix('');


        var map2 = L.map('map2', {
            layers: [osm2, m2],
            center: center,
            zoom: vzoom_current,
            maxZoom: vzoom_max,
            minZoom: vzoom_min,
            zoomControl: false
        });

        map1.sync(map2);
        map2.sync(map1);


        marker1 = L.marker(map1.getCenter()).addTo(map1);
        marker2 = L.marker(map2.getCenter()).addTo(map2);

        map1.on("moveend", function (e) {
            marker1.setLatLng(map1.getCenter());
        });
        map1.on("move", function (e) {
            marker1.setLatLng(map1.getCenter());
        });
        map1.on("zoom", function (e) {
            marker1.setLatLng(map1.getCenter());
        });

        map2.on("moveend", function (e) {
            marker2.setLatLng(map2.getCenter());
        });
        map2.on("move", function (e) {
            marker2.setLatLng(map2.getCenter());
        });
        map2.on("zoom", function (e) {
            marker2.setLatLng(map2.getCenter());
        });

        baseMaps1 = {'basemap': osm};
        overlayMaps1 = {"{{app_arr[0].title}}": m1};
        L.control.layers(baseMaps1, overlayMaps1).addTo(map1);

        baseMaps2 = {'basemap': osm2};
        overlayMaps2 = {"{{app_arr[1].title}}": m2};
        L.control.layers(baseMaps2, overlayMaps2).addTo(map2);

    }
</script>

{% end %}
